.Modal {
    .Modal-title {
        padding: 8px 8px 8px 16px;
        min-height: 38px;
        background-color: var(--light-bg-color);
        border-bottom: var(--border);
    }

    .Modal-close {
        position: absolute;
        right: 8px;
        top: 8px;
        padding: 0;
    }

    .FullScreenModal,
    .StandardModal {
        z-index: 300;
        display: flex;
        flex-direction: column;
    }

    .StandardModal {
        padding-top: 8vh;
        align-items: center;
        overflow: hidden;

        &.wide {
            .Modal-box {
                max-width: var(--max-width);
            }
        }

        &.message-size {
            .Modal-box {
                width: 600px;
            }
        }

        &.with-padding {
            .Modal-box .Modal-content {
                padding: 16px 20px;
            }
        }

        &.no-scroll .Modal-box .Modal-content {
            overflow: hidden;
        }

        .Modal-background {
            background-color: var(--modal-bg-color);
            opacity: 0.75;
        }

        &.is-active .Modal-box {
            opacity: 1;
            transform: none;
        }

        .Modal-box {
            width: 90vw;
            min-width: 400px;
            max-width: var(--max-width);
            max-height: 84vh;
            margin: 0 auto;
            border: var(--border);
            border-radius: var(--border-radius);
            background-color: var(--bg-color);
            overflow-y: hidden;
            display: flex;
            flex-direction: column;
            position: relative;

            opacity: 0;
            transform: translate(0, 5vh);
            transition: all 0.2s ease-out;

            .Modal-content {
                max-height: inherit;
                height: auto;
                overflow-y: auto;
            }
        }
    }

    .FullScreenModal {
        background-color: var(--bg-color);
        max-height: 100vh;
        max-width: 100vw;
        .Modal-content {
            position: relative;
            height: 100%;
        }
    }
}
